<template>
  <div class="page">
    <fui-collapse @change="change">
      <fui-collapse-item :index="index"
                         :open="item.isOpen"
                         v-for="(item,index) in items"
                         :key="index">
        <view class="fui-item__box">
          <image :src="item.src"
                 class="fui-logo"></image>
          <text>{{item.title}}</text>
        </view>
        <template v-slot:content>
          <view class="fui-descr row"
                style="background-color: rgba(255, 183, 3, .1);"
                v-for="(item1,index1) in item.descr"
                :key="index1">{{item1}}</view>
        </template>
      </fui-collapse-item>
    </fui-collapse>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [{
        src: '/static/images/common/logo.png',
        title: '开发初衷',
        descr: ['起先是技术达到一定水平，可以着手前后端的开发了，于是有了独立开发一款应用的念头，想练练手。刚好觉得自己需要一个记录本收藏夹功能，能满足自己独特的需求，于是便开始打造这款花里胡哨的小程序了。所以这款程序本身仅是为作者想法打造的。若同时又能吸引用户的使用，那便是好事成双了。'],
        isOpen: true
      }, {
        src: '/static/images/common/icon_tabbar_2x.png',
        title: '开发技术',
        descr: ['前端：vue 框架', '后端：beego 框架', '组件：FirstUI 、ColorUI', ' 其他：uniapp，将 vue 项目转化为小程序', '开源地址：https://gitee.com/ ，有想学习的小伙伴可以 star 下']
      },
      {
        src: '/static/images/common/icon_tabbar_2x.png',
        title: '开发理念',
        descr: ['灵活性：放大用户权限，能自定义系统配置，如全局背景，展示主题，卡片样式之类。尽量让用户能够搭建自己的哈姆雷特', '安全性：为保证数据不被探查到，每个数据入库前都需加密处理。']
      }, {
        src: '/static/images/common/icon_tabbar_2x.png',
        title: '联系作者',
        descr: ['QQ：2069234934']
      }]

    }
  }
}
</script>

<style lange="scss" scoped>
.fui-item__box {
  width: 100%;
  padding: 26rpx 32rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.fui-logo {
  width: 48rpx;
  height: 48rpx;
  margin-right: 24rpx;
  display: block;
}

.fui-descr {
  width: 100%;
  padding: 32rpx;
  font-size: 28rpx;
  line-height: 52rpx;
  color: #7f7f7f;
  word-break: break-all;
  box-sizing: border-box;
}

.row {
  padding-top: 5px;
  padding-bottom: 5px;
}
</style>